<template>
  <div class="dashboard-container">
    <panel-group :panel-data="PanelData"/>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-col :xs="24" :md="8" :lg="12" :xl="16">
          <span class="title">基础报表</span>
        </el-col>
        <el-col :xs="24" :md="16" :lg="12" :xl="8">
          <div class="inline-block">
            <span class="demonstration">选择时间段：</span>
            <el-date-picker
              v-model="timeSpan"
              :picker-options="pickerOptions"
              :default-time="['00:00:00', '23:59:59']"
              type="daterange"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="max-width:100%;margin-bottom:10px;"/>
            <el-button @click="pickTime">确定</el-button>
          </div>
        </el-col>
      </div>
      <el-row :gutter="30">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="grid-content bg-purple">
            <line-chart :chart-data="ChartData.newUsers" :type="1" tip="APP用户增长数量"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="grid-content bg-purple">
            <line-chart :chart-data="ChartData.token" :type="3" tip="APP用户收益"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="grid-content bg-purple-light">
            <bar-chart :chart-data="ChartData.readTime" :type="4" tip="APP阅读时长"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="grid-content bg-purple-light">
            <pie-chart :chart-data="ChartData.orderAnalysis" :type="2" tip="APP用户订阅："/>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin:20px 0;">
      <div slot="header" class="clearfix">
        <span class="title">数据报表</span>
      </div>
      <el-row :gutter="30">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <line-chart :chart-data="ChartData.UnlockDistribution" :type="1" tip="DLB解锁数量"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="grid-content bg-purple-light">
            <pie-chart :chart-data="ChartData.DLBpie" :type="2" tip="DLB："/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="grid-content bg-purple-light">
            <pie-chart :chart-data="ChartData.RealStatePie" :type="2" tip="实名状态人数："/>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import { getUserInfoReport, getDlbPie, getUnlockDistributionBrokenLine, getRealStatePie } from '@/api/table'

export default {
  name: 'Home',
  components: {
    PanelGroup,
    LineChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      listLoading: false,
      ChartData: {
        newUsers: {},
        orderAnalysis: {},
        token: {},
        readTime: {},
        DLBpie: {},
        UnlockDistribution: {},
        RealStatePie: {}
      },
      PanelData: [],
      timeSpan: [],
      timeValue: [],
      pickerOptions: {
        // 时间段选择：禁止选择今天之后的
        disabledDate(time) {
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          return time.getTime() > Date.now() || time.getTime() < start
        },
        // 选中日期后会执行的回调
        onPick: ({ maxDate, minDate }) => {
          if (maxDate && minDate) {
            this.timeValue = [new Date(minDate).getTime(), new Date(maxDate).getTime()]
          }
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    // 默认最近一个月
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
    this.timeValue = [new Date(start).getTime(), new Date(end).getTime()]
    this.timeSpan = [start, end]
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getUserInfoReport({
        time: this.timeValue
      }).then(response => {
        if (response.code === 200) {
          this.ChartData.newUsers = response.data.newUsers
          this.ChartData.orderAnalysis = response.data.orderAnalysis
          this.ChartData.token = response.data.token
          this.ChartData.readTime = response.data.readTime

          this.PanelData = [response.data.newUsers.history, response.data.orderAnalysis.history, response.data.token.history, response.data.readTime.history]
        }
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })

      getDlbPie().then(response => {
        if (response.code === 200) {
          this.ChartData.DLBpie = response.data
        }
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })

      getUnlockDistributionBrokenLine().then(response => {
        if (response.code === 200) {
          this.ChartData.UnlockDistribution = response.data
        }
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })

      getRealStatePie().then(response => {
        if (response.code === 200) {
          this.ChartData.RealStatePie = response.data
        }
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    pickTime() {
      this.fetchData()
    }
  }
}
</script>

<style lang="scss">
.dashboard-container{
  margin: 20px;
  .grid-content{
    margin-bottom:50px;
  }
  .title{
    display:inline-block;
    height:40px;
    line-height:40px;
  }
  .demonstration{
    display:inline-block;
    height:40px;
    line-height:40px;
  }
}
.chart{
  // div{
  //   width:100% !important;
  //   canvas{
  //     width:100% !important;
  //   }
  // }
}
</style>
